﻿<div class="hbox hbox-auto-xs hbox-auto-sm" ng-init="
    app.settings.asideFolded = false;
    app.settings.asideDock = false;
  ">
    <!-- main -->
    <div class="col">
        <!-- main header -->
        <div class="bg-light lter b-b wrapper-md">
            <div class="row">
                <div class="col-sm-6 col-xs-12">
                    <h1 class="m-n font-thin h3 text-black">仪表盘</h1>
                    <small class="text-muted">欢迎使用本应用程序</small>
                </div>
                <div class="col-sm-6 text-right hidden-xs">
                    <div class="inline m-r text-left">
                        <div class="m-b-xs">1290 <span class="text-muted">条数据</span></div>
                        <div ng-init="d3_1=[ 106,108,110,105,110,109,105,104,107,109,105,100,105,102,101,99,98 ]"
                             ui-jq="sparkline"
                             ui-options="{{d3_1}}, {type:'bar', height:20, barWidth:5, barSpacing:1, barColor:'#dce5ec'}"
                             class="sparkline inline">
                            加载中...
                        </div>
                    </div>
                    <div class="inline text-left">
                        <div class="m-b-xs">$30,000 <span class="text-muted">收益</span></div>
                        <div ng-init="d3_2=[ 105,102,106,107,105,104,101,99,98,109,105,100,108,110,105,110,109 ]"
                             ui-jq="sparkline"
                             ui-options="{{d3_2}}, {type:'bar', height:20, barWidth:5, barSpacing:1, barColor:'#dce5ec'}"
                             class="sparkline inline">
                            加载中...
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- / main header -->
        <div class="wrapper-md" ng-controller="FlotChartDemoCtrl">
            <!-- stats -->
            <div class="row">
                <div class="col-md-5">
                    <div class="row row-sm text-center">
                        <div class="col-xs-6">
                            <div class="panel padder-v item">
                                <div class="h1 text-info font-thin h1">521</div>
                                <span class="text-muted text-xs">条新数据</span>
                                <div class="top text-right w-full">
                                    <i class="fa fa-caret-down text-warning m-r-sm"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <a href class="block panel padder-v bg-primary item">
                                <span class="text-white font-thin h1 block">930</span>
                                <span class="text-muted text-xs">个云端文件</span>
                                <span class="bottom text-right w-full">
                                    <i class="fa fa-cloud-upload text-muted m-r-sm"></i>
                                </span>
                            </a>
                        </div>
                        <div class="col-xs-6">
                            <a href class="block panel padder-v bg-info item">
                                <span class="text-white font-thin h1 block">432</span>
                                <span class="text-muted text-xs">条评论</span>
                                <span class="top">
                                    <i class="fa fa-caret-up text-warning m-l-sm m-r-sm"></i>
                                </span>
                            </a>
                        </div>
                        <div class="col-xs-6">
                            <div class="panel padder-v item">
                                <div class="font-thin h1">129</div>
                                <span class="text-muted text-xs">条动态</span>
                                <div class="bottom">
                                    <i class="fa fa-caret-up text-warning m-l-sm m-r-sm"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 m-b-md">
                            <div class="r bg-light dker item hbox no-border">
                                <div class="col w-xs v-middle hidden-md">
                                    <div ng-init="d3_3=[60,40]" ui-jq="sparkline" ui-options="{{d3_3}}, {type:'pie', height:40, sliceColors:['{{app.color.warning}}','#fff']}" class="sparkline inline"></div>
                                </div>
                                <div class="col dk padder-v r-r">
                                    <div class="text-primary-dk font-thin h1"><span>￥12,670</span></div>
                                    <span class="text-muted text-xs">收益, 已完成 60% 的目标</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="panel wrapper">
                        <label class="i-switch bg-warning pull-right" ng-init="showSpline=true">
                            <input type="checkbox" ng-model="showSpline">
                            <i></i>
                        </label>
                        <h4 class="font-thin m-t-none m-b text-muted">最新流量播报</h4>
                        <div ui-jq="plot" ui-refresh="showSpline" ui-options="
              [
                {data: {{d0_1}}, label:'TV', points: { show: true, radius: 1}, splines: { show: {{showSpline}}, tension: 0.4, lineWidth: 1, fill: 0.8 } },
                {data: {{d0_2}}, label:'Mag', points: { show: true, radius: 1}, splines: { show: {{showSpline}}, tension: 0.4, lineWidth: 1, fill: 0.8 } }
                ], 
              {
                colors: ['{{app.color.info}}', '{{app.color.primary}}'],
                series: { shadowSize: 3 },
                xaxis:{ font: { color: '#a1a7ac' } },
                yaxis:{ font: { color: '#a1a7ac' }, max:20 },
                grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#dce5ec' },
                tooltip: true,
                tooltipOpts: { content: 'Visits of %x.1 is %y.4',  defaultTheme: false, shifts: { x: 10, y: -25 } }
              }
            " style=" height:246px">
                        </div>
                    </div>
                </div>
            </div>
            <!-- / stats -->
            <!-- service -->
            <div class="panel hbox hbox-auto-xs no-border">
                <div class="col wrapper">
                    <i class="fa fa-circle-o text-info m-r-sm pull-right"></i>
                    <h4 class="font-thin m-t-none m-b-none text-primary-lt">托管服务</h4>
                    <span class="m-b block text-sm text-muted">实时服务报告（更新于1小时前） </span>
                    <div ui-jq="plot" ui-options="
            [
              { data: {{d4}}, lines: { show: true, lineWidth: 1, fill:true, fillColor: { colors: [{opacity: 0.2}, {opacity: 0.8}] } } }
            ], 
            {
              colors: ['{{app.color.light}}'],
              series: { shadowSize: 3 },
              xaxis:{ show:false },
              yaxis:{ font: { color: '#a1a7ac' } },
              grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#dce5ec' },
              tooltip: true,
              tooltipOpts: { content: '%s of %x.1 is %y.4',  defaultTheme: false, shifts: { x: 10, y: -25 } }
            }
          " style=" height:240px">
                    </div>
                </div>
                <div class="col wrapper-lg w-lg bg-light dk r-r">
                    <h4 class="font-thin m-t-none m-b">报表</h4>
                    <div class="">
                        <div class="">
                            <span class="pull-right text-primary">60%</span>
                            <span>资询顾问</span>
                        </div>
                        <div class="progress progress-xs m-t-sm bg-white">
                            <div class="progress-bar bg-primary" data-toggle="tooltip" data-original-title="60%" style="width: 60%"></div>
                        </div>
                        <div class="">
                            <span class="pull-right text-info">35%</span>
                            <span>在线教程</span>
                        </div>
                        <div class="progress progress-xs m-t-sm bg-white">
                            <div class="progress-bar bg-info" data-toggle="tooltip" data-original-title="35%" style="width: 35%"></div>
                        </div>
                        <div class="">
                            <span class="pull-right text-warning">25%</span>
                            <span>教育管理</span>
                        </div>
                        <div class="progress progress-xs m-t-sm bg-white">
                            <div class="progress-bar bg-warning" data-toggle="tooltip" data-original-title="23%" style="width: 25%"></div>
                        </div>
                    </div>
                    <p class="text-muted">
                        人之所以会迷茫，那就是本该拼搏的年纪，却想得太多，做得太少，归根结底是因为没有理想。
                    </p>
                </div>
            </div>
            <!-- / service -->
            <!-- tasks -->
            <div class="panel wrapper">
                <div class="row">
                    <div class="col-md-6 b-r b-light no-border-xs">
                        <a href class="text-muted pull-right text-lg"><i class="icon-arrow-right"></i></a>
                        <h4 class="font-thin m-t-none m-b-md text-muted">我的任务</h4>
                        <div class=" m-b">
                            <div class="m-b">
                                <span class="label text-base bg-warning pos-rlt m-r"><i class="arrow right arrow-warning"></i> 19:30</span>
                                <a href>喂猫</a>
                            </div>
                            <div class="m-b">
                                <span class="label text-base bg-info pos-rlt m-r"><i class="arrow right arrow-info"></i> 12:30</span>
                                <a href>捕鱼时间</a>
                            </div>
                            <div class="m-b">
                                <span class="label text-base bg-primary pos-rlt m-r"><i class="arrow right arrow-primary"></i> 10:30</span>
                                <a href>开会</a>
                            </div>
                            <div class="m-b">
                                <span class="label text-base bg-light pos-rlt m-r"><i class="arrow right arrow-light"></i> 07:30</span>
                                <a href>晨跑</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row row-sm">
                            <div class="col-xs-6 text-center">
                                <div ui-jq="easyPieChart" ui-options="{
                                    percent: 75,
                                    lineWidth: 4,
                                    trackColor: '{{app.color.light}}',
                                    barColor: '{{app.color.primary}}',
                                    scaleColor: false,
                                    size: 115,
                                    rotate: 90,
                                    lineCap: 'butt'
                                  }" class="inline m-t">
                                    <div>
                                        <span class="text-primary h4">75%</span>
                                    </div>
                                </div>
                                <div class="text-muted font-bold text-xs m-t m-b">工作量</div>
                            </div>
                            <div class="col-xs-6 text-center">
                                <div ui-jq="easyPieChart" ui-options="{
                                    percent: 50,
                                    lineWidth: 4,
                                    trackColor: '{{app.color.light}}',
                                    barColor: '{{app.color.info}}',
                                    scaleColor: false,
                                    size: 115,
                                    rotate: 180,
                                    lineCap: 'butt'
                                  }" class="inline m-t">
                                    <div>
                                        <span class="text-info h4">50%</span>
                                    </div>
                                </div>
                                <div class="text-muted font-bold text-xs m-t m-b">启动</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- / tasks -->
            <!-- tasks -->
            <div class="row">
                <div class="col-md-6">
                    <div class="panel no-border">
                        <div class="panel-heading wrapper b-b b-light">
                            <span class="text-xs text-muted pull-right">
                                <i class="fa fa-circle text-primary m-r-xs"></i> 12
                                <i class="fa fa-circle text-info m-r-xs m-l-sm"></i> 30
                                <i class="fa fa-circle text-warning m-r-xs m-l-sm"></i> 98
                            </span>
                            <h4 class="font-thin m-t-none m-b-none text-muted">团队成员</h4>
                        </div>
                        <ul class="list-group list-group-lg m-b-none">
                            <li class="list-group-item">
                                <a href class="thumb-sm m-r">
                                    <img src="img/a1.jpg" class="r r-2x">
                                </a>
                                <span class="pull-right label bg-primary inline m-t-sm">管理员</span>
                                <a href>王尼玛</a>
                            </li>
                            <li class="list-group-item">
                                <a href class="thumb-sm m-r">
                                    <img src="img/a2.jpg" class="r r-2x">
                                </a>
                                <span class="pull-right label bg-info inline m-t-sm">普通成员</span>
                                <a href>赵日天</a>
                            </li>
                            <li class="list-group-item">
                                <a href class="thumb-sm m-r">
                                    <img src="img/a3.jpg" class="r r-2x">
                                </a>
                                <span class="pull-right label bg-warning inline m-t-sm">编辑</span>
                                <a href>叶良辰</a>
                            </li>
                            <li class="list-group-item">
                                <a href class="thumb-sm m-r">
                                    <img src="img/a4.jpg" class="r r-2x">
                                </a>
                                <span class="pull-right label bg-warning inline m-t-sm">编辑</span>
                                <a href>龙傲天</a>
                            </li>
                        </ul>
                        <div class="panel-footer">
                            <span class="pull-right badge badge-bg m-t-xs">32</span>
                            <button class="btn btn-primary btn-addon btn-sm"><i class="fa fa-plus"></i>添加新成员</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="list-group list-group-lg list-group-sp">
                        <a herf class="list-group-item clearfix">
                            <span class="pull-left thumb-sm avatar m-r">
                                <img src="img/a4.jpg" alt="...">
                                <i class="on b-white right"></i>
                            </span>
                            <span class="clear">
                                <span>宋小宝</span>
                                <small class="text-muted clear text-ellipsis">自打我进宫以来，就独得皇上恩宠</small>
                            </span>
                        </a>
                        <a herf class="list-group-item clearfix">
                            <span class="pull-left thumb-sm avatar m-r">
                                <img src="img/a5.jpg" alt="...">
                                <i class="on b-white right"></i>
                            </span>
                            <span class="clear">
                                <span>王健林</span>
                                <small class="text-muted clear text-ellipsis">先定一个能达到的小目标</small>
                            </span>
                        </a>
                        <a herf class="list-group-item clearfix">
                            <span class="pull-left thumb-sm avatar m-r">
                                <img src="img/a6.jpg" alt="...">
                                <i class="busy b-white right"></i>
                            </span>
                            <span class="clear">
                                <span>福尔康</span>
                                <small class="text-muted clear text-ellipsis">紫薇，是你吗紫薇</small>
                            </span>
                        </a>
                        <a herf class="list-group-item clearfix">
                            <span class="pull-left thumb-sm avatar m-r">
                                <img src="img/a7.jpg" alt="...">
                                <i class="busy b-white right"></i>
                            </span>
                            <span class="clear">
                                <span>叶良辰</span>
                                <small class="text-muted clear text-ellipsis">你若同意，改日良辰必有重谢</small>
                            </span>
                        </a>
                        <a herf class="list-group-item clearfix">
                            <span class="pull-left thumb-sm avatar m-r">
                                <img src="img/a8.jpg" alt="...">
                                <i class="away b-white right"></i>
                            </span>
                            <span class="clear">
                                <span>凤姐</span>
                                <small class="text-muted clear text-ellipsis">往前300年往后推300年， 没有人会超过我</small>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
            <!-- / tasks -->
        </div>
    </div>
    <!-- / main -->
    <!-- right col -->
    <div class="col w-md bg-white-only b-l bg-auto no-border-xs">
        <div class="nav-tabs-alt">
            <ul class="nav nav-tabs" role="tablist">
                <li class="active">
                    <a data-target="#tab-1" role="tab" data-toggle="tab">
                        <i class="glyphicon glyphicon-user text-md text-muted wrapper-sm"></i>
                    </a>
                </li>
                <li>
                    <a data-target="#tab-2" role="tab" data-toggle="tab">
                        <i class="glyphicon glyphicon-comment text-md text-muted wrapper-sm"></i>
                    </a>
                </li>
                <li>
                    <a data-target="#tab-3" role="tab" data-toggle="tab">
                        <i class="glyphicon glyphicon-transfer text-md text-muted wrapper-sm"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="tab-1">
                <div class="wrapper-md">
                    <div class="m-b-sm text-md">关注了谁</div>
                    <ul class="list-group no-bg no-borders pull-in">
                        <li class="list-group-item">
                            <a herf class="pull-left thumb-sm avatar m-r">
                                <img src="img/a4.jpg" alt="..." class="img-circle">
                                <i class="on b-white bottom"></i>
                            </a>
                            <div class="clear">
                                <div><a href>马云</a></div>
                                <small class="text-muted">CEO, 干爹</small>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <a herf class="pull-left thumb-sm avatar m-r">
                                <img src="img/a5.jpg" alt="..." class="img-circle">
                                <i class="on b-white bottom"></i>
                            </a>
                            <div class="clear">
                                <div><a href>周冬雨</a></div>
                                <small class="text-muted">程序员鼓励师</small>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <a herf class="pull-left thumb-sm avatar m-r">
                                <img src="img/a6.jpg" alt="..." class="img-circle">
                                <i class="busy b-white bottom"></i>
                            </a>
                            <div class="clear">
                                <div><a href>马思纯</a></div>
                                <small class="text-muted">并列程序员鼓励师</small>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <a herf class="pull-left thumb-sm avatar m-r">
                                <img src="img/a7.jpg" alt="..." class="img-circle">
                                <i class="away b-white bottom"></i>
                            </a>
                            <div class="clear">
                                <div><a href>路飞</a></div>
                                <small class="text-muted">.net66班优秀学员</small>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <a herf class="pull-left thumb-sm avatar m-r">
                                <img src="img/a8.jpg" alt="..." class="img-circle">
                                <i class="away b-white bottom"></i>
                            </a>
                            <div class="clear">
                                <div><a href>哆啦A梦</a></div>
                                <small class="text-muted">家政阿姨</small>
                            </div>
                        </li>
                    </ul>
                    <div class="text-center">
                        <a href class="btn btn-sm btn-primary padder-md m-b">更多联系人</a>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane tab-2" id="tab-2">
                <div class="wrapper-md">
                    <div class="m-b-sm text-md">消息</div>
                    <ul class="list-group no-borders pull-in auto">
                        <li class="list-group-item">
                            <span class="pull-left thumb-sm m-r"><img src="img/a1.jpg" alt="..." class="img-circle"></span>
                            <a href="#" class="text-muted" ui-toggle-class="show" target=".app-aside-right"><i class="fa fa-comment-o pull-right m-t-sm text-sm"></i></a>
                            <div class="clear">
                                <div><a href="">曹操</a></div>
                                <small class="text-muted">请叫我 double fuck</small>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <span class="pull-left thumb-sm m-r"><img src="img/a2.jpg" alt="..." class="img-circle"></span>
                            <a href="#" class="text-muted" ui-toggle-class="show" target=".app-aside-right"><i class="fa fa-comment-o pull-right m-t-sm text-sm"></i></a>
                            <div class="clear">
                                <div><a href="">金轮法王</a></div>
                                <small class="text-muted">请叫我 Gold fuck king</small>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <span class="pull-left thumb-sm m-r"><img src="img/a3.jpg" alt="..." class="img-circle"></span>
                            <a href class="text-muted" ui-toggle-class="show" target=".app-aside-right"><i class="fa fa-comment-o pull-right m-t-sm text-sm"></i></a>
                            <div class="clear">
                                <div><a href="">雷军</a></div>
                                <small class="text-muted">Are You OK?</small>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <span class="pull-left thumb-sm m-r"><img src="img/a4.jpg" alt="..." class="img-circle"></span>
                            <a href class="text-muted" ui-toggle-class="show" target=".app-aside-right"><i class="fa fa-comment-o pull-right m-t-sm text-sm"></i></a>
                            <div class="clear">
                                <div><a href="">吴京</a></div>
                                <small class="text-muted">犯我中华者虽远必诛</small>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane tab-3" id="tab-3">
                <div class="wrapper-md">
                    <div class="m-b-sm text-md">交易</div>
                    <small>这个界面并不想翻译...</small>
                    <ul class="list-group list-group-sm list-group-sp list-group-alt auto m-t">
                        <li class="list-group-item">
                            <span class="text-muted">Transfer to Jacob at 3:00 pm</span>
                            <span class="block text-md text-info">B 15,000.00</span>
                        </li>
                        <li class="list-group-item">
                            <span class="text-muted">Got from Mike at 1:00 pm</span>
                            <span class="block text-md text-primary">B 23,000.00</span>
                        </li>
                        <li class="list-group-item">
                            <span class="text-muted">Sponsored ORG at 9:00 am</span>
                            <span class="block text-md text-warning">B 3,000.00</span>
                        </li>
                        <li class="list-group-item">
                            <span class="text-muted">Send to Jacob at 8:00 am</span>
                            <span class="block text-md">B 11,000.00</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="padder-md">
            <!-- streamline -->
            <div class="m-b text-md">最新活动</div>
            <div class="streamline b-l m-b">
                <div class="sl-item">
                    <div class="m-l">
                        <div class="text-muted">5分钟前</div>
                        <p><a href class="text-info">奥巴马</a> 评论了你的文章.</p>
                    </div>
                </div>
                <div class="sl-item">
                    <div class="m-l">
                        <div class="text-muted">11:30</div>
                        <p>参加会议</p>
                    </div>
                </div>
                <div class="sl-item b-success b-l">
                    <div class="m-l">
                        <div class="text-muted">10:30</div>
                        <p>致电给客户 <a href class="text-info">市妇联办公室</a> 并讨论细节</p>
                    </div>
                </div>
                <div class="bg-info wrapper-sm m-l-n m-r-n m-b r r-2x">
                    为团队创建任务
                </div>
                <div class="sl-item b-primary b-l">
                    <div class="m-l">
                        <div class="text-muted">03月25日 星期三</div>
                        <p>完成任务 <a href class="text-info">单元测试#4335</a>.</p>
                    </div>
                </div>
                <div class="sl-item b-warning b-l">
                    <div class="m-l">
                        <div class="text-muted">03月10日 星期四</div>
                        <p>往返月球</p>
                    </div>
                </div>
                <div class="sl-item b-info b-l">
                    <div class="m-l">
                        <div class="text-muted">03月05日 星期六</div>
                        <p>准备PPT和演讲稿</p>
                    </div>
                </div>
                <div class="sl-item b-l">
                    <div class="m-l">
                        <div class="text-muted">02月11日 星期日</div>
                        <p><a href class="text-info">达康书记</a> 分配了任务给你： <a href class="text-info">填写精准扶贫表格</a>.</p>
                    </div>
                </div>
                <div class="sl-item b-l">
                    <div class="m-l">
                        <div class="text-muted">01月17日 星期四</div>
                        <p>密切跟进交易</p>
                    </div>
                </div>
            </div>
            <!-- / streamline -->
        </div>
        <div data-ng-include=" 'tpl/blocks/aside.right.html' ">
            {% include '../tpl/blocks/aside.right.html' %}
        </div>
    </div>
    <!-- / right col -->
</div>
